<layout name='layout_page' />
<script>
/*$(function(){
	window.onbeforeunload = function(){
	event.returnValue="You have entered the content has not been saved, determined to leave this page?";
	}
})*/
</script>
<script src="<{:STATICS}>/centaurus/js/jquery.maskedinput.min.js"></script> 
<div class="row">
	<div class="col-lg-12">
		<div class="row">
			<div class="col-lg-12">
				<ol class="breadcrumb">
					<li><a href="<{:U('Index/index')}>">Home</a></li>
					<li class="active"><span>Mentor Profile</span></li>
				</ol>
				<h1>Edit My Profile</h1>
			</div>
		</div>

		<div class="row" id="user-profile">
			<div class="col-lg-12 col-md-12 col-sm-12">				
				<div class="main-box">
					<div class="main-box-body clearfix myProfile">
						<form id="ajaxForm" action="<{:U('Profile/save')}>" method="post" enctype='multipart/form-data' class="form-horizontal form-validata">

							<div class="tagName" style="margin-top:10px">Basic Information</div>

							<div class="baseInfoBox">
								<div class="base-left">
									<img src="<{$user['face']|getFace=###}>" id="face" class="profile-img img-responsive center-block">
									<div class="profile-message-btn center-block text-center">
									<button type="button" class="btn btn-success" onclick="uploadImage('<{:U('Avatar/index')}>','face')">
									<i class="fa fa-file-image-o"></i>
									Change Avatar
									</button>
									</div>
								</div>

								<div class="base-right">
									<div class="form-group">
										<div class="row">
											<div class="col-md-6">
												<label>Nickname</label>
												<input type="text" class="form-control" id="nickname" name="nickname" value="<{$user['nickname']}>">
											</div>
										</div>										
									</div>

									<div class="form-group">
										<label>Name<span class="red">*</span></label>
										<div class="row">
											<div class="col-md-3">
												<input type="text" class="form-control" id="firstName" name="firstName" value="<{$user['firstName']}>" placeholder="First Name" data-rule-required="true">
											</div>
											<div class="col-md-3">
												<input type="text" class="form-control" id="lastName" name="lastName" value="<{$user['lastName']}>" placeholder="Last Name" data-rule-required="true">
											</div>
										</div>								
									</div>
								</div>
							</div>

							<div class="tagName">Contact Information</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-6">
										<label>Phone<span class="red">*</span></label>
										<input type="text" class="form-control" name="phone" id="phone" value="<{$phone}>" data-rule-required="true">
									</div>
								</div>								
							</div>

							<script>
							$(function(){
								$("#phone").mask("+1(999) 999-9999");
							})
							</script>
							
							<div class="form-group">
								<div class="row">
									<div class="col-md-6">
									<label>Address<span class="red">*</span></label>
									<input type="text" class="form-control" name="address" id="address" value="<{$user['address']}>" data-rule-required="true" data-rule-en="true">
									</div>
								</div>
							</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-6">			
										<input type="text" class="form-control" name="address2" id="address2" value="<{$user['address2']}>" placeholder="Apartment,State,Unit etc.(Optional)" data-rule-en="true">
									</div>
								</div>								
							</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-2">
										<label>City<span class="red">*</span></label>
										<input type="text" class="form-control" name="city" id="city" value="<{$user['city']}>" data-rule-required="true">
									</div>
									<div class="col-md-2">
										<label>State<span class="red">*</span></label>
										<select name="state" id="state" class="form-control" data-rule-required="true">
											<option value="">--select--</option>
											<volist name="state" id="vo">
											<option value="<{$vo.name}>"><{$vo.name}></option>
											</volist>
										</select>
									</div>
									<div class="col-md-2">
										<label>Zip code<span class="red">*</span></label>
										<input type="text" class="form-control" name="zip" id="zip" value="<{$user['zip']}>" data-rule-required="true" data-rule-number="true" data-rule-zip="true">
									</div>
								</div>
							</div>				

							<div class="tagName">Education and Work</div>							

							<div class="form-group">
								<div class="row">
									<div class="col-md-3">
										<label>Industry / Field of Expertise<span class="red">*</span></label>						
										<input type="text" class="form-control" name="expertise" id="expertise" value="<{$user['expertise']}>" data-rule-required="true">			
									</div>
									<div class="col-md-3">
										<label>Position<span class="red">*</span></label>
										<input type="text" class="form-control" name="position" id="position" value="<{$user['position']}>" data-rule-required="true">
									</div>
								</div>								
							</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-3">
										<label>Years of Experience<span class="red">*</span></label>
										<input type="text" class="form-control" id="exp" name="exp" value="<{$user['exp']}>" placeholder="Enter years of Experience" data-rule-required="true" data-rule-number="true">
									</div>
									<div class="col-md-3">
										<label>Resume<span class="red">*</span></label>
										<empty name="user['resume']">
										<input type="file" class="form-control" name="file" id="file" accept=".doc,.pdf" data-rule-required="true">
										<else/>										
										<input type="file" class="form-control" name="file" id="file" accept=".doc,.docx,.pdf">
										<p><i class="fa fa-file-text"></i> <strong><{$user['document']}></strong> <a href="<{$user['resume']}>">Download</a></p>
										</empty>
									</div>
									<div class="col-md-6">
										<label>&nbsp;</label>
										<div style="padding-top:5px; color:#999">only .pdf and .doc</div>
									</div>
								</div>								
							</div>

							<div class="form-group">
								<label>Expertise<span class="red">*</span></label>
								<br/>
								<volist name="train" id="vo">
								<label class="checkbox-inline">
									<input type="checkbox" name="trainItem[]" value="<{$vo.id}>" <?php if(in_array($vo['id'],$user['trainItem'])){echo checked;}?>><{$vo.name}>
								</label>
								</volist>
							</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-6">
										<label>Skills<span class="red">*</span></label>
										<textarea class="form-control" name="skill" id="skill" rows="3" data-rule-required="true"><{$user['skill']}></textarea>
									</div>
								</div>								
							</div>

							<div class="tagName">Personal Information</div>

							<div class="form-group">
								<div class="row">
									<div class="col-md-3">
										<label>Date of Birth</label>
										<div class="input-group">
											<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
											<input type="text" class="form-control" id="birthday" name="birthday" value="<{$user['birthday']}>">
										</div>			
										<script> 
										$(function(){
											$("#birthday" ).datepicker({
				                              changeMonth: true,
				                              changeYear: true,
				                              defaultDate:'01/01/1960',
				                              yearRange: "1960:<{$nowYear}>"
				                            });
										});
										</script>
									</div>
									<div class="col-md-3">
										<label class="myLabel">Gender</label>
										<div class="radio myRadio">
											<input type="radio" name="gender" id="optionsRadios1" value="male" <eq name="user.gender" value="male">checked="checked"</eq>>
											<label for="optionsRadios1">Male</label>
										</div>
										<div class="radio myRadio">
											<input type="radio" name="gender" id="optionsRadios2" value="female" <eq name="user.gender" value="female">checked="checked"</eq>>
											<label for="optionsRadios2">Female</label>
										</div>
									</div>
								</div>								
							</div>

							<div class="form-group">				
								<button type="submit" id="myBtn" class="btn btn-success">save</button>				
							</div>						

						</form>
					</div>
				</div>
			</div>
		</div>		
	</div>
</div>

<script>
$(function(){
	$("#state").val('<{$user.state}>');
})
</script>